<template>
  <el-dialog
    :visible.sync="dialogShow"
    :before-close="handelClose"
    class="medium-common-dialog-size create-settle-dialog cost-config-dialog">
    <Title :title="title" font-size="16px" style="margin-bottom:15px;"/>
    <el-table
      :data="dataList"
      :max-height="tableHeight"
      class="table-fixed"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column align="left" label="工号" width="100">
        <template slot-scope="scope">
          <div>{{ scope.row.jobNmber || scope.row.number || '' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="姓名" width="150">
        <template slot-scope="scope">
          <div class="flex-cell">
            <img :src="scope.row.avatar || userAvatar" class="avatar" alt="">
            <span>{{ scope.row.userName }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column v-if="showCancel" align="left" label="操作" width="60">
        <template slot-scope="scope">
          <el-button type="text" @click.native="cancel(scope.row)"><span style="font-size:14px;">取消</span></el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import userAvatar from '@/assets/user-avatar.png';
export default {
  components: { Title },
  props: {
    showCancel: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '审批人员'
    }
  },
  data() {
    return {
      userAvatar,
      dialogShow: false,
      dataList: [],
      tableHeight: '',
      extendParams: {}
    };
  },
  methods: {
    handelClose() {
      this.dialogShow = false;
      this.dataList = [];
    },
    openDialog(data, extendParams) {
      const clientHeight = window.innerHeight;
      this.tableHeight = (clientHeight * 3) / 5;
      this.dataList = data;
      this.dialogShow = true;
      this.extendParams = extendParams;
    },
    cancel(item) {
      this.$emit('cancel', { item, list: this.dataList, extendParams: this.extendParams });
    }
  }
};
</script>

<style lang="scss" scoped>
.flex-cell {
  display: flex;
  align-items: center;
}
.avatar {
  width:24px;
  height:24px;
  border-radius: 100%;
  margin-right: 5px;
}
</style>
